<template>
  <el-dialog title="用户注册" width="800px" :visible.sync="isShow">
    <el-form label-width="100px" :model="form" :rules="rules" ref="form">
      <el-form-item prop="avatar" label="头像">
        <el-upload
          v-model="form.avatar"
          class="avatar-uploader"
          name="image"
          :action="UploadUrl"
          :show-file-list="false"
          :on-success="onSuccess"
          :before-upload="beforeAvatarUpload"
        >
        <!-- name上传的文件字段名 接口给的对应字段名是image-->
        <!-- http-request覆盖默认的上传行为，可以自定义上传的实现 -->
        <!--action头像上传地址  data 携带额外参数  imageUrl图片预览-->
        <!-- on-success成功之后调用的方法 一实现预览 二给form -->
        <!--  before-upload  上传图片之前 1 限制文件的类型大小 二是给-->
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item prop="username" label="昵称">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item prop="phone" label="手机">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item prop="password" label="密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>
      <!-- <el-form-item  label="图形码" class="form-item">
        <el-input  class="input"></el-input>
        <div class="img">
          <img src="" alt="" />
        </div>
      </el-form-item> -->
      <el-row :gutter="10">
            <el-col :span="16">
              <el-form-item prop="rcode" label="图形码" class="form-item">
                <el-input
                v-model="form.rcode"
                  prefix-icon="el-icon-key"
                  placeholder="请输入验证码"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <!-- <img style="width:100%;height:40px;" :src="RegisterUploadUrl" alt="" @click="changeRegisterUploadUrl"/> -->
              <img style="width:100%;height:40px;" :src="baseUrl+'/captcha?type=sendsms&'+num" alt=""  @click="num=Date.now()" />
            </el-col>
          </el-row>
      <el-form-item label="验证码" class="form-item" prop="captcha" >
        <el-input  class="input" v-model="form.captcha"></el-input>
        <div class="img btn1">
          <el-button v-model="form.captcha" @click="getCodeUrl" >获取验证码</el-button>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="center">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="Close()">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
// 导入注册用户接口,导入动态验证码jiekou
import { Userregister, captchaTypeSendsms } from '@/api/login'
export default {
  name: 'MyRigister',
  data () {
    return {
      isShow: false,
      imageUrl: '', // 头像上传地址
      // RegisterUploadUrl: process.env.VUE_APP_URL + '/captcha?type=sendsms',
      UploadUrl: process.env.VUE_APP_URL + '/uploads',
      form: {
        avatar: '', // 头像地址
        username: '', // 用户名
        email: '@qq.com', // 邮箱
        phone: '', // 手机号
        password: '', // 密码
        rcode: '', // 验证码
        captcha: ''
      },

      baseUrl: process.env.VUE_APP_URL, // 图片地址，
      num: Date.now(),
      rules: {
        avatar: [{ required: true, message: '请上传头像', trigger: 'blur' }], // 头像地址
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }], // 用户名
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }], // 邮箱
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, message: '请输入正确的手机号', trigger: 'change' }], // 手机号
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 12, message: '请输入6-12位密码', trigger: 'change' }], // 密码
        rcode: [{ required: true, message: '请输入验证码', trigger: 'blur' }] // 验证码
      },
      // showBig: false,
      // showProgress: false,
      // uploadObj: {
      //   image: null
      // },
      uerId: ''
    }
  },
  methods: {
    // 上传成功以后的返回值
    onSuccess (response, file, fileList) {
      console.log('上传头像成功以后的返回值', response)
      // 文件地址:file_path: 'upload/20221209/969057ae2d9fa9bfdcceaa28609c194f.png'
      this.imageUrl = process.env.VUE_APP_URL + '/' + response.data.file_path
      this.form.avatar = response.data.file_path
    },
    // 上传图片成功以后的方法
    handleAvatarSuccess (res, file) {

    },
    // 上传头像之前 限制图片类型和大小
    beforeAvatarUpload (file) {
      console.log(file, 'file')
      // 判断上传文件类型
      const isType = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
      if (!isType) {
        // 提示上传失败原因
        this.$message.error('上传图片只能是jpg/png/gif格式')
      }
      // 上传图片不能超过两兆
      const isSize = file.size / 1024 / 1024 < 2
      if (!isSize) {
        this.$message.error('上传图片大小不能超过两兆')
      }
    },
    // changeRegisterUploadUrl () {
    //   this.RegisterUploadUrl = process.env.VUE_APP_URL + `/captcha?type=sendsms&t=${Date.now()}`
    // },
    // 点击获取获取验证码
    async getCodeUrl () {
      // const res = await captchaTypeSendsms({
      //   code: this.form.rcode,
      //   phone: this.form.phone
      // })
      // console.log('获取动态验证码', res)
      // // this.form.captcha = res.data.data.captcha
      const res = await captchaTypeSendsms({
        code: this.form.rcode,
        phone: this.form.phone
      })
      this.captcha = res.data.captcha
      console.log(res, '获取验证码')
      this.$message.success('验证码', this.captcha)
    },
    // 注册点击事件
    submit () {
      this.$refs.form.validate(async result => {
        if (result) {
          const res = await Userregister(this.form)
          this.uerId = res.data.user_id
          // 关闭
          this.isShow = false
          this.Close()
        }
      })
    },
    Close () {
      // 手动清空
      this.form = {
        form: {
          avatar: '', // 头像地址
          username: '', // 用户名
          email: '@qq.com', // 邮箱
          phone: '', // 手机号
          password: '', // 密码
          rcode: '', // 验证码
          captcha: ''
        }
      }
      this.isShow = false
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  margin-left: 100px;
  :hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
::v-deep .el-form-item__content {
              display: flex;
              font-size: 14px;
              .input{
                margin-right: 30px;
              }
              .img {
                width: 131px;
                background-color: #f3fbfe;
                // margin-left: 30px;
              }
          }
</style>
